// The wrapper around the devices
.site-mockup__devices {
	margin: auto;
	padding: 16px;
	transition: max-width 200ms ease-in-out;

	// Side by side layout uses flexbox to show
	// both mockups next to each other.
	@include breakpoint-deprecated( '>960px' ) {
		max-width: 1200px;
		display: flex;
		align-items: flex-start;
	}

	@include breakpoint-deprecated( '<660px' ) {
		padding-right: 1px;
		padding-left: 1px;
		padding-bottom: 0;
	}

	@include breakpoint-deprecated( '660px-960px' ) {
		position: relative;
	}
}

// Some microcopy to help people understand the mockups.
.site-mockup__help-tip {
	color: var( --color-primary-5 );
	text-align: center;
	font-size: $font-body-small;
	margin: 24px 16px -8px;
	transition: all 300ms cubic-bezier( 0.08, 0.74, 0.44, 1.07 );
	transition-delay: 200ms;

	&:last-child {
		margin-bottom: 24px;
	}

	p {
		margin: 0 auto;
		max-width: 420px;
		line-height: 1.4;
	}


	// Hide the tip until a vertical is selected.
	.is-empty & {
		opacity: 0;
		transform: translateY( 80px );
	}
}
